<template>
  <div class="full-page login-box">
    <div class="title">一个 Dota 2 数据平台</div>
    <van-form @submit="onSubmit" class="form-box">
      <van-cell-group inset>
        <van-field
          v-model="userId"
          name="id"
          label="Dota2ID"
          placeholder="请输入Dota2ID"
          :rules="[{ required: true, message: '请填写ID' }]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="danger" native-type="submit">登陆</van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { Toast } from "vant";
const store = useStore();
const router = useRouter();
const userId = ref("");
const onSubmit = () => {
  Toast.loading("登陆中");
  store
    .dispatch("player/login", userId.value)
    .then((userName) => {
      Toast.success(`欢迎您,${userName}`);
      router.push({
        name: "Home",
      });
    })
    .catch((e) => {
      Toast.fail(e);
    });
};
</script>
<style lang="scss" scoped>
.login-box {
  position: relative;
  background-image: url("https://img2.baidu.com/it/u=1469562805,1490532349&fm=26&fmt=auto&gp=0.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  .title {
    margin-bottom: 50px;
    color: #ffffff;
    font-weight: bold;
  }
  .form-box {
    margin-bottom: 100px;
  }
}
</style>
